<template>
  <div class="home_container">
    <el-container>
      <el-header>
        <div class="header_container">
          <div></div>
          <div></div>
          <div class="header_wrapper">
            <el-button type="text" @click="login">login</el-button>
            <!-- <el-button>降序</el-button>
            <el-button>升序</el-button> -->
            <el-button @click="goCart">🛒</el-button>
            <el-button @click="exit">退出登录</el-button>
          </div>
          <el-dialog
          
            title="登录用户"
            :visible.sync="dialogVisible"
            width="30%">
            <el-input v-model="username" placeholder="用户名"/>
            <el-input v-model="password" placeholder="密码"/>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="isLogin">确 定</el-button>
            </span>
          </el-dialog>
        </div>
      </el-header>
      <el-container>
        <div class="aside_container">
          <el-aside width="200px">
          <el-menu
            default-active="2"
            router
            class="el-menu-vertical-demo">
             <el-menu-item index="/">
                <span slot="title">all</span>
              </el-menu-item>
              <el-menu-item index="/demo2">
                <span slot="title">0-100</span>
              </el-menu-item>
              <el-menu-item index="/demo3">
                <span slot="title">100-500</span>
              </el-menu-item>
              <el-menu-item index="/demo4">
                <span slot="title">500-1000</span>
              </el-menu-item>
              <el-menu-item index="/demo5">
                <span slot="title">1000-2000</span>
              </el-menu-item>
          </el-menu>
        </el-aside>
        </div>
        <el-main>
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data(){
    return{
      dialogVisible:false,
      password:"",
      username:""
    }
  },
  methods:{
    isLogin(){
      this.$axios.post("http://ceshi5.dishait.cn/admin/login",{username:this.username,password:this.password}).then(res=>{
        console.log(res.data.data.token)
        localStorage.setItem("token",res.data.data.token);
        this.dialogVisible = false;
        this.$message("登录成功")
      })
    },
    login(){
      if(localStorage.getItem("token")){
        this.$message("已经登录过")
      }else{
        this.dialogVisible = true;
      }
    },
    exit(){
      if(localStorage.getItem("token")){
        localStorage.removeItem("token");
        this.$message("退出成功");
      }else{
        this.$message("您还未登录");
      }
    },
    goCart(){
      if(localStorage.getItem("token")){
        this.$router.push("/about")
      }else{
        this.$message("请你先登录在查看购物车内商品")
      }
    }
  }
}
</script>

<style scoped>
.header_container
{
  width: 100%;
  height: 100%;
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
}

.header_container > div
{
  flex: 1;
  /* border: 1px solid #fff; */
  height: 100%;
}

.header_wrapper
{
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
}

.el-header
{
  background-color: #B3C0D1;
  height: 10vh;
  width: 100vw;
}
  
.el-aside 
{
  background-color: #D3DCE6;
  height: 90vh;
  width: 10vw;
}

.el-main 
{
  background-color: #E9EEF3;
  height: 90vh;
  width: 90vw;
}

@media screen and (max-width: 780px) {
  .aside_container
  {
    display: none;
  }
}
</style>